<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>推箱子网页版</title>
<script src="../../../js/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<style type="text/css">
ol,li{
	margin: 0px;
	padding: 0px
}
</style>
<script type="text/javascript">
	function keydown(e) {
		if ( e.keyCode < 37 || e.keyCode > 40 ){
			return;
		}
		v.move(e.keyCode);
		// e.keyCode==37 && /*游戏左移*/ 	||
		// e.keyCode==38 && /*游戏上移*/ 		||
		// e.keyCode==39 && /*游戏右移*/ 	||
		// e.keyCode==40 && /*游戏下移*/;
		// // 判断当前关结束就进入下一关
	}
</script>
</head>
<body onkeydown="keydown(event)">
	<div id="main" style="padding: 20px;">
		<h1>推箱子网页版</h1>
		<div id="map" style="float: left">
			<div v-for="row in game.map" style="height: 30px">
				<img v-for="i in row" :src="'imgs/'+i+'.GIF'">
			</div>
		</div>
		<div id="ctl" style="padding: 20px; float: left; text-align: center;">
			<h2>第1关</h2>
			<span>第0步</span><br>
			<br>
			<input placeholder="尊姓大名" style="width:96px;text-align: center">
			<br>
			<br>
			<button style="width: 100px">重新开始</button>
			<br>
			<br>
			<button style="width: 100px">保    存</button>
			<br>
			<br>
			<button style="width: 100px">加    载</button>
		</div>
		<div id="score" style="padding: 20px; float: left; text-align: center;">
			<h2>排名</h2>
			<ol>
				<li v-for=" user in scores[ game.getIndex() ]">
					{{user.name}} : {{user.time}} 秒
				</li>

			</ol>
		</div>
	</div>
	<script>
		var v = new Vue({
			el:"#main",
			data:{
				game:null,
				//scores :[[{name:"zs",time:123456},{},{}],[] ]
				scores: [],
				time:0, //通关时间
			},
			//事件钩子函数
			//created 在 Vue构建完成后调用的函数
			created(){
				var json = localStorage.getItem("pushbox_scores");
				var scores = JSON.parse(json);
				if(scores){
					this.scores = scores;
				}
				this.game = new Game();
				this.game.next();
				this.time=new Date();

			},
			methods:{
				move(keycode){
					if (keycode == 37){
						this.game.left();
					}else if (keycode == 38){
						this.game.up();
					}else if (keycode == 39){
						this.game.right();
					}else if (keycode == 40){
						this.game.down();
					}else {
						return;
					}
					//强制刷新
					this.$forceUpdate();
					if (this.game.youWin()){
						//延迟100ms ，显示结束，地图渲染完成
						setTimeout(()=>{
							alert("厉害！！！");
							//关数 =》scores 数组下标值
							var index = this.game.getIndex();
							var users = this.scores[index];

							if(users == undefined){
								//创建新用户数组
								users = [];
								this.scores[index] = users;
							}
							//用户输入自己的名字
							var name = prompt("请输入你的名字");
							//计算通关时间
							var time = new Date().getTime()-this.time.getTime();
							//换算成秒
							time = parseInt(time/1000);
							//构建成绩对象
							var score = {
								name:name,
								time :time
							}
							//数组添加元素
							users.push(score);
							//将对象转成json字符串
							 var json = JSON.stringify(this.scores);
							 //将成绩保存到localStorage
							localStorage.setItem("pushbox_scores",json);
							this.game.next();
							//记录游戏开始时间
							this.time= new Date();

						},100);
					}


				}
			}

		})
	</script>

</body>
</html>